<template>
  <div class="app-container">
    <div style="margin-bottom: 20px;">
      <el-input v-model="listQuery.keyword" placeholder="请输入机构名称/商户负责人" style="width: 280px;" class="filter-item" clearable @keyup.enter.native="handleFilter" />
      <label class="form-key" style="margin-left: 20px;">区域范围：</label>
      <el-cascader
        size="large"
        :options="areaOptions"
        style="width:240px"
        @change="areaChange"
      />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="handleFilter">
        查询
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :element-loading-text="g.loadingStr"
      :header-cell-style="{background:g.mainColor}"
    >
      <el-table-column label="序号" align="center" width="50" fixed>
        <template slot-scope="{$index}">
          <span>{{ $index + 1 + ( listQuery.currentPage - 1 ) * listQuery.pageSize }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商户LOGO" align="center">
        <template slot-scope="{row}">
          <span><img :src="row.logoImg" alt="" class="table-row-img"></span>
        </template>
      </el-table-column>
      <el-table-column label="机构名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构地址" align="center">
        <template slot-scope="{row}">
          <span>{{ row.province }}{{ row.city }}{{ row.region }}{{ row.town }}{{ row.detail }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商户负责人" align="center">
        <template slot-scope="{row}">
          <span>{{ row.principalName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" width="120px">
        <template slot-scope="{row}">
          <span>{{ row.serverPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="经营范围" align="center">
        <template slot-scope="{row}">
          <span>{{ row.categoryNames }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="200">
        <template slot-scope="{row}">
          <el-button v-show="checkPermission('merchantVerifyDetail')" type="primary" size="mini" @click="handleDetail(row)">
            处理审核
          </el-button>
          <el-button type="success" size="mini" @click="handleEditBusinessLicens(row)">编辑执照</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getList" />

    <el-dialog title="编辑资料" :visible.sync="editBussinessDialog" :close-on-click-modal="false" width="800px">
      <h3 class="edit_title">营业执照：</h3>
      <el-upload
        drag
        multiple
        :file-list="CertificateImgfileList"
        :show-file-list="true"
        :on-change="handleCertificateImgChange"
        :on-remove="handleRemoveCertificateImg"
        :class="{hide:hideCertificateImgUpload}"
        :auto-upload="false"
        action="#"
        list-type="picture-card"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将营业执照拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <h3 class="edit_title">法人身份证：</h3>
      <el-upload
        drag
        multiple
        :file-list="idCardImgfileList"
        :show-file-list="true"
        :on-change="handleIdcardImgChange"
        :on-remove="handleRemoveIdcardImg"
        :class="{hide:hideIdcardImgUpload}"
        :auto-upload="false"
        action="#"
        list-type="picture-card"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将法人身份证拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editBussinessDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitEditChange">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { regionData, CodeToText } from 'element-china-area-data'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { merchantVerifyList, editBusinessImgInfo } from '@/api/account'
export default {
  name: 'MerchantVerifyList',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        status: 1,
        keyword: '',
        province: '',
        city: '',
        region: ''
      },
      areaOptions: regionData,
      editBussinessDialog: false,
      // 上传资料
      editBussinessId: '',
      CertificateImgfileList: [], // 营业执照
      idCardImgfileList: [], // 法人身份证
      imgFile: null,
      certificateImg: '',
      idCardImg: '',
      hideCertificateImgUpload: false,
      hideIdcardImgUpload: false
    }
  },
  created() {
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleEditBusinessLicens(row) {
      const { id: bussinessId } = row
      this.editBussinessId = bussinessId
      this.imgFile = null
      this.hideCertificateImgUpload = false
      this.hideIdcardImgUpload = false
      this.editBussinessDialog = true
    },
    // 营业执照
    handleCertificateImgChange(file, fileList) {
      this.imgFile = fileList.length > 0 ? file : null
      this.hideCertificateImgUpload = fileList.length > 0
      this.uploadImgToOss(this.imgFile).then((response) => {
        this.certificateImg = response
      })
    },
    handleRemoveCertificateImg() {
      this.hideCertificateImgUpload = false
      this.certificateImg = ''
    },
    // 法人身份证
    handleIdcardImgChange(file, fileList) {
      this.imgFile = fileList.length > 0 ? file : null
      this.hideIdcardImgUpload = fileList.length > 0
      this.uploadImgToOss(this.imgFile).then((response) => {
        this.idCardImg = response
      })
    },
    handleRemoveIdcardImg() {
      this.hideIdcardImgUpload = false
      this.idCardImg = ''
    },
    // 提交编辑
    submitEditChange() {
      const editBusinessParams = {
        businessId: this.editBussinessId + '',
        idCardImg: this.idCardImg,
        certificateImg: this.certificateImg
      }
      editBusinessImgInfo(editBusinessParams).then(response => {
        console.log(response)
        if (response.code === '200') {
          this.$message.success('添加成功')
          this.editBussinessDialog = false
          this.$nextTick(() => {
            this.idCardImg = ''
            this.certificateImg = ''
            console.log(this.CertificateImgfileList)
            console.log(this.idCardImgfileList)
          })
        }
      })
    },
    getList() {
      this.listLoading = true
      merchantVerifyList(this.listQuery).then(response => {
        console.log(response.data)
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    areaChange(value) {
      const provinces = CodeToText[value[0]]
      const city = CodeToText[value[1]]
      const region = CodeToText[value[2]]
      this.listQuery.province = provinces
      this.listQuery.city = city
      this.listQuery.region = region
    },
    handleDetail(row) {
      this.$router.push({ name: 'MerchantVerifyDetail', params: { id: row.id, serverPhone: row.serverPhone, categoryNames: row.categoryNames }})
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-upload-dragger{
  height: 150px;
  display: flex;
  // flex-direction: column;
  justify-content: center;
}
/deep/ .el-upload{
  border: none;
}
.edit_title{
  margin-top: 20px;
}
.el-dialog__body{
  padding: 20px;
}
.hide /deep/.el-upload--picture-card {
  display: none;
  width: 100px;
  height: 100px;
}
</style>
